<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <!-- 若您需要使用Kendo UI Professional，请联系版权人获得合法的授权或许可。 -->
    <!-- Bootstrap css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/css/bootstrap.min.css"
        rel="stylesheet">
    <!-- kendo ui css -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.common.min.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/styles/kendo.default.min.css"
        rel="stylesheet">
    <!-- font-awesome -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/fontawesome/css/font-awesome.css" rel="stylesheet">
    <!--蓝鲸提供的公用样式库 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk.css" rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css/bk_pack.css" rel="stylesheet">
    <!-- 如果要使用Bootstrap的js插件，必须先调入jQuery -->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
    <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <!-- 包括所有kendoui的js插件或者可以根据需要使用的js插件调用　-->
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/kendoui-2015.2.624/js/kendo.all.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/echarts-2.0/echarts-all.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/bk/js/bk.js"></script>
    <!-- 数据埋点统计 -->
    <script src="http://magicbox.bk.tencent.com/static_api/analysis.js"></script>
    <!-- 以下两个插件用于在IE8以及以下版本浏览器支持HTML5元素和媒体查询，如果不需要用可以移除 -->
    <!--[if lt IE 9]><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/html5shiv.min.js"></script><script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/respond.min.js"></script><![endif]-->
    <!-- 时间选择器 -->
    <link href="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker-2.0.css"
        rel="stylesheet">
    <link href="https://magicbox.bk.tencent.com/static_api/v3/bk/css-pro/bk.css" rel="stylesheet">
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/moment.min.js"></script>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/daterangepicker-2.0.5/daterangepicker.js">
    </script>
</head>

<body class="bg-white" data-bg-color="bg-white">
    <div class="king-page-box">
        <div class="king-layout1-header">
            <nav role="navigation" class="navbar navbar-default king-horizontal-nav3     f14">
                <div class="nav-container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bk-example-navbar-collapse-3">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a class="navbar-brand" href="javascript:;">
                            <img src="https://magicbox.bk.tencent.com/static_api/v3/bk/images/logo.png" alt=""
                                class="logo"> </a>
                    </div>
                    <div class="collapse navbar-collapse navbar-responsive-collapse" id="bk-example-navbar-collapse-3">
                        <ul class="nav navbar-nav ">
                            <!--<li :class="{'bk-cur':item.active}"  v-for="item in renderData.items">-->
                            <!-- <li> <a href="{{ SITE_URL }}">首页<span></span></a> </li> -->
                            <li> <a href="{{ SITE_URL }}">执行任务<span></span></a> </li>
                            <li class="bk-cur"> <a href="{{ SITE_URL }}task_log">任务记录<span></span></a> </li>
                        </ul>
                        <!-- <form class="navbar-form navbar-left" role="search">
                            <div class="form-group">
                                <input type="text" class="form-control" placeholder="搜索..."> </div>
                        </form> -->
                        <ul class="nav navbar-nav navbar-right">
                            <li>
                                <a href="javascript:;">
                                    <img src="https://magicbox.bk.tencent.com/static_api/v3/components/horizontal_nav3/images/avatar.png"
                                        class="avatar">
                                    <span>管理者 ( admin )</span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </nav>
        </div>
        <div class="king-layout2-main mt15" style="width:960px;">
            {% csrf_token %}
            <form class="form-horizontal">
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">业务：</label>
                    <div class="col-sm-9">
                        <select name="" id="ex_bk_biz_name" class="form-control bk-valign-top">
                            {% for x in data.ex_bk_biz_name %}
                            <option value={{x.ex_bk_biz_name}}>{{x.ex_bk_biz_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">用户：</label>
                    <div class="col-sm-9">
                        <select name="" id="ex_user" class="form-control bk-valign-top">
                            {% for x in data.ex_user %}
                            <option value={{x.ex_user}}>{{x.ex_user}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">任务：</label>
                    <div class="col-sm-9">
                        <select name="" id="ex_script_name" class="form-control bk-valign-top">
                            {% for x in data.ex_script_name %}
                            <option value={{x.ex_script_name}}>{{x.ex_script_name}}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="form-group clearfix ">
                    <label class="col-sm-3 control-label bk-lh30 pt0">日期：</label>
                    <div class="col-sm-9">
                        <input type="text" class="bk-form-input daterangepicker_demo" id="daterangepicker"
                            placeholder="选择日期...">

                    </div>
                </div>
                <div class="form-group clearfix">
                    <div class="col-sm-9 col-sm-offset-3">
                        <button type="button" class="king-btn mr10  king-success" onclick="search_log(1)">执行</button>
                    </div>
                </div>
            </form>

            <table class="table mb0 pr15 ranger-box2  ">
                <thead>
                    <tr>
                        <th style="width: 70px;">job_instance_id</th>
                        <th style="width: 15%;">业务</th>
                        <th style="width: 15%;">用户</th>
                        <th style="width: 15%;">任务</th>
                        <th style="width: 20%;">操作时间</th>
                        <th style="width: 10%;">机器数</th>
                        <th style="width: 10%;">状态</th>
                        <!-- <th style="width: 10%;">参数</th>
                        <th style="width: 10%;">详情</th> -->
                    </tr>
                </thead>
                <tbody id="task_log_tbody">
                    <!-- <tr>
                        <td style="width: 70px;">1</td>
                        <td style="width: 15%;">业务1</td>
                        <td style="width: 15%;">admin</td>
                        <td style="width: 15%;">task1</td>
                        <td style="width: 15%;">2020/02/03 17:22:33</td>
                        <td style="width: 15%;">3</td>
                        <td style="width: 10%;">完成</td>
                        <td style="width: 10%;">参数1</td>
                        <td style="width: 10%;">
                            <button class="btn btn-xs btn-info"> <i class="glyphicon glyphicon-info"></i> </button>
                            <a class="btn btn-primary btn-xs">查看详情</a>
                        </td>
                    </tr> -->
                    
                </tbody>

            </table>
            <div class="row" id="nav_page" align="right">
                
            </div>
        </div>

    </div>
    <script>
        $(function () {
            var li = $('.navbar-nav li');
            li.each(function () {
                $(this).click(function () {
                    if ($(this).hasClass('opens') && $(this).find('ul li').length != 0) {
                        $(this).find('ul').slideUp(250);
                        $(this).removeClass('opens');
                    } else if ($(this).find('ul li').length != 0) {
                        $(this).find('ul').slideDown(250);
                        $(this).addClass('opens');
                        $(this).siblings('li').removeClass('opens').find('ul').slideUp();
                    }
                });
            });
            search_log(1)
        })

        // 需要加csrf_token
        function search_log(page) {
            // alert($("#daterangepicker").val())
            $.ajax({
                url: "{{ SITE_URL }}search_log/",
                type: "post",
                data: {
                    "ex_bk_biz_name": $("#ex_bk_biz_name").val(),
                    "ex_user": $("#ex_user").val(),
                    "ex_script_name": $("#ex_script_name").val(),
                    "ex_time": $("#daterangepicker").val(),
                    "page": page,
                    "csrfmiddlewaretoken": $("input[name='csrfmiddlewaretoken']").val(),
                },
                success: function (res) {
                    if (res.result) {
                        $('#task_log_tbody').html(res.data)
                        $('#nav_page').html(res.nav_page)
                    } else {
                        alert(res.message)
                    }
                },
                error: function (res) {
                    alert(res.message)
                }
            })
        }
    </script>
    <script type="text/javascript">
        // 选择日期范围
        $('#daterangepicker').daterangepicker({
            locale: {
                "format": 'YYYY/MM/DD'
            },
            autoApply: true
        });
    </script>

</body>

</html>